<template>
  <button @click="addSum">addSum</button>
  loveStore.sum:{{ loveStore.sum }} sum:{{ sum }} school:{{ school }}
  <br />
  bigSum: {{ bigSum }} upSchool:{{ upSchool }}
  <hr />
  <button @click="loveStore.addLove">loveStore.addLove</button>
  <ul>
    <li v-for="l in list">
      <p>{{ l.title }}</p>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { useLoveStore } from "@/store/love";
import { storeToRefs } from "pinia";
let loveStore = useLoveStore();
// let { sum, school, } = toRefs(loveStore); //toRefs(loveStore)全部都变成ref
let { sum, school, bigSum, upSchool, list } = storeToRefs(loveStore); //只关注store的数据
let addSum = () => {
  // loveStore.sum++;//1 loveStore改变
  // setTimeout(() => { //2 loveStore改变
  //   loveStore.$patch({
  //     sum: 101,
  //     school: "games",
  //   });
  // },1000);
  loveStore.increment(); //3 loveStore改变
};

// 订阅
loveStore.$subscribe((mutate, state) => {
  console.log(mutate, state);
  localStorage.setItem("list", JSON.stringify(state.list));
});
</script>

<style lang="scss" scoped></style>
